<template>
    <!--首页轮播图的结构-->
    <el-carousel trigger="click"  pause-on-hover="false" style="width: 100%;" height="30vw">
      <el-carousel-item v-for="(item) in images" :key="item.id">
        <a  :href="item.url">
          <img :src="item.imgurl" alt="/">
          <div class="txt wrap a-m-c">                 
            <h2 style="visibility: visible;">{{item.name}}</h2>                 
            <h3 style="visibility: visible; animation-name: fadeInUp;">{{item.title}}<br></h3>                                    
          </div>
        </a>
      </el-carousel-item>
    </el-carousel>
</template>

<script lang="ts" setup name="Carousel">

  let images = [{ id:1,name:'安恒',title:'恒星安全培训服务产品',imgurl:'https://www.dbappsecurity.com.cn/upload/space_banner.jpg',url:'https://www.dbappsecurity.com.cn/product/cloud1441.html'},
                { id:2,name:'',title:'',imgurl:'https://obs-xhlj.obs.cn-east-3.myhuaweicloud.com/2023/3/26e81e6767bf4af18b84638091fedc3e.jpg',url:'https://www.gcsis.cn/activity/175.html'},
                { id:3,name:'安恒',title:'明御®鉴安网络靶场',imgurl:'https://www.dbappsecurity.com.cn/Upload/image/20210517/20210517224200_9252.jpg', url:'https://www.dbappsecurity.com.cn/space/cyberspace.html'},
                { id:4,name:'安恒',title:'竞赛服务',imgurl:'	https://www.dbappsecurity.com.cn/Upload/image/20210526/20210526102729_3110.jpg',url:'https://www.dbappsecurity.com.cn/space/range.html'}];
</script>

<style scoped lang="scss">
  img{
    width: 100%;
    height: 100%;
  }
  .txt{
    color: white;
    h2{
      color: white;
    }
    h3{
      color: white;
    }
  }
  .wrap{
    max-width: 90%;
    margin: auto;
  }
  .a-m-c{
    position: absolute;
    left:10%;
    top: 50%;
  }
</style>

  